<template>
  <div class="third-comp">
    <div class="left">
      <el-card>
        <template #header>
          <h2>关键词搜索</h2>
        </template>
        <template #default>
          <div class="main">
            <div class="charts">
              <div class="left-chart">
                <div class="title">搜索用户量</div>
                <div class="number">{{userNum}}</div>
                <v-chart :option="userOption"></v-chart>
              </div>
              <div class="right-chart">
                <div class="title">搜索量</div>
                <div class="number">{{searchNum}}</div>
                <v-chart :option="searchOption"></v-chart>
              </div>
            </div>
            <div class="table">
              <el-table :data="pageData">
                <el-table-column label="排名" prop="rank"></el-table-column>
                <el-table-column label="关键词" prop="keyWord"></el-table-column>
                <el-table-column label="总搜索量" prop="totalSearch"></el-table-column>
                <el-table-column label="搜索用户数" prop="totalUser"></el-table-column>
              </el-table>
              <el-pagination
                background
                layout="prev,pager,next"
                :page-size="6"
                :total="tableData.length"
                @current-change="handleCurrentChange"
              ></el-pagination>
            </div>
          </div>
        </template>
      </el-card>
    </div>
    <div class="right">
      <el-card shadow="hover">
        <template #header>
            <h2>热门搜索</h2>
            <el-radio-group v-model="type" @change="handleChange">
                <el-radio-button label="品类" value="category"></el-radio-button>
                <el-radio-button label="商品" value="product"></el-radio-button>
            </el-radio-group>
        </template>
        <template #default>
            <v-chart :option="categoryOption"></v-chart>
        </template>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted,computed} from 'vue'
import {getKeywordsData,getCategoryData} from '@/api/index'
import { color } from 'echarts'
import { formatter } from 'element-plus'

const tableData = ref([])
const categoryData = ref([])
const page = ref(1) //当前页码
const userOption = ref({}) //用户量图表配置
const searchOption = ref({})//搜索量图表配置
const categoryOption = ref({}) //分类搜索图表配置
const type = ref('category')//热门搜索类型

const pageData = computed(() => {
    //根据当前页,计算当前页要显示的数据
    const start = (page.value - 1) * 6
    const end = start + 6 

    return tableData.value.slice(start,end)
})

//总用户量
const userNum = computed(() => {
    return tableData.value.reduce((acc,cur) => acc + cur.totalUser,0)
})
//总搜索量
const searchNum = computed(() => {
    return tableData.value.reduce((acc,cur) =>acc + cur.totalSearch,0 )
})

const handleCurrentChange = (value) => {
    page.value = value
}

const renderLineChart = (chartOption,data) => {
    chartOption.value = {
        xAxis:{
            type:'category',
            show:false,
            boundaryGap:false,
        },
        yAxis:{
            show:false,
        },
        grid:{
            top:0,
            left:0,
            right:0,
            bottom:0,
        },
        series:{
            type:'line',
            data:data,
            areaStyle:{
                color:'skyblue',
            },
            itemStyle:{
                opacity:0,
            },
            smooth:true,
        }
    }
}

const renderCategoryChart = (data) => {
    const _data = data.map((item) => {
        return {
            ...item,
            //添加一个name属性
            name:`${item.title} | ${item.value}`,
        }
    })
    const total = data.reduce((acc,cur) => acc + cur.value,0)
    categoryOption.value = {
        title:[
            {
                text:'品类分布',
                textStyle:{
                    fontStyle:14,
                    color:'#666',
                },
            },
            {
                text:'累计订单量',
                subtext:total,
                textAlign:'center',
                x:'40%',
                y:'45%',
                textStyle:{
                    fontSize:14,
                    color:'#999',
                },
                subtextStyle:{
                    fontSize:28,
                    color:'#333',
                }
            }
        ],
        tooltlp:{
            formatter(params){
                console.log(params)
                //seriesName要求series中必须有name属性
                const res = `
                    ${params.seriesName}<br>
                    ${params.marker}${params.data.title}<br>
                    ${params.marker} 销售额: ${params.data.value}<br>
                `
                return res
            }
        },
        legend:{
            //legend要求series的data数组中对象必须有name属性
            orient:'vertical',
            left:'80%',
            top:'top',
            textStyle:{
                color:'#888',
            }
        },
        series:{
            type:'pie',
            name:'品类分布',
            data:_data,
            radius:['45%','60%'],//饼图的半径[内半径,外半径]
            center:['40%','50%'],//饼图的中心坐标
            label:{
                position:'outside',
                formatter(params){
                    // console.log(params)
                    return params.data.title
                },
            },
            itemStyle:{
                borderWidth:8,
                borderColor:'#fff',
            }
        }
    }
}

const handleChange = () => {
    if(type.value === 'category'){
        renderCategoryChart(categoryData.value.data1)
    }else if(type.value === 'product'){
        renderCategoryChart(categoryData.value.data2)
    }
}

onMounted(async() => {
    tableData.value = await getKeywordsData()
    categoryData.value = await getCategoryData()
    // console.log(tableData.value,'table')

    //由于接口返回的数据格式不是我们希望的,因此需要对原始数据进行加工处理
    const userData = tableData.value
        .map((item) => item.totalUser)
        .slice(0,10)
        .sort((a,b) => a - b)

    const searchData = tableData.value
    .map((item) => item.totalSearch)
    .slice(0,10)
    .sort((a,b) => a - b)

    renderLineChart(userOption,userData)
    renderLineChart(searchOption,searchData)

    renderCategoryChart(categoryData.value.data1)
})
</script>

<style lang="scss" scoped>
.third-comp{
    margin-top: 20px;
    display: flex;
    gap: 20px;
    .left{
        flex: 1;
        h2{
            font-weight: 600;
        }
        .main{
            padding: 20px;
            .charts{
                display: flex;
                gap: 20px;
                .left-chart,
                .right-chart{
                    flex: 1;
                    .title{
                        font-size: 14px;
                        color: #727171;
                    }
                    .number{
                        margin-top: 10px;
                        font-size: 20px;
                        font-weight: 600;
                    }
                    //v-chart 设置的默认样式
                    .echarts{
                        height: 50px;
                    }
                }
            }
        }
    }
    .right{
        flex: 1;
        :deep(.el-card__header){
            position: relative;
            h2{
                font-weight: 600;
            }
            .el-radio-group{
                position: absolute;
                top: 10px;
                right: 20px;
            }
        }
        :deep(.el-card__body){
            height: 502px;
            box-sizing: border-box;
        }
    }
}
</style>
